<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=974; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0"/>
		<title>BLOBkit Samples</title>

		<script type='text/javascript' src='../tvb-min.js'></script>
		<style>
			.TVB_scroller_menu_container{
				background-color: #cccccc;
			}
			.TVB_scroller_row{
				background-color: #000001;

			}
			.menuItem{
				color:white;
				font-size:30px;
				margin-left:20px;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			TVB.widget.titleBar.setTitle("Scroller Menu");
			TVB.widget.titleBar.setIcon("http://www.blobforge.com/static/lib/resources/ibk.png");
			TVB.widget.titleBar.render();
		</script>

		<div id='container'></div>

		<script type="text/javascript">
			var testMenu = {
					cid : "container",
					name : "test",
					visible: 7,
					total:7,
					rowSelectedColor:"#5c7300",
					rowUnselectedColor:"#0b1000",
					rowWidthPx:600,
					rowHeightPx:50,
					rowBorderPx: 2,
					scrollerColor: "#0b1000",
					barColor: "#5c7300",
					circular: true,

					drawLineCB: function(line){
						try{
							return '<div class="menuItem">item ' + line + '</div>';
						}catch(e){
							TVB.log(e);
							return "";
						}
					},

					navLeftCB: function(){

					},

					navRightCB: function(line){

					},

					selectLineCB: function(line){
						TVB.log("Selected line: " + line);
					}
			}

			var scroller = new TVB.scroller(testMenu);
			scroller.total = 20;

			scroller.draw();
			scroller.enter();

		</script>
	</body>
</html>